<!--
* @Author: zhangjing
* @Date: 2025-03-17 11:37:42
* @Description: 随机抽答=>
-->
<template>
	<div class="pannel">
		<audio ref="music" src="/mp3/djs.mp3" crossOrigin="anonymous" preload @timeupdate="ondjsTimeupdate"></audio>
		<audio ref="bgmusic" src="/mp3/hkbg.mp3" crossOrigin="anonymous" preload @timeupdate="onTimeupdate"></audio>
		<div class="cardbox flex flex-v">
			<div class="bind-con">
				<div class="bind-bd">
					<div class="list flex flex-align-center flex-pack-center">
						<template v-if="!isStart && userList.length == 0">
							<img src="/impromptu/notice.png" class="img01" />
							<!-- <img src="/impromptu/books.png" class="img02" /> -->
							<img src="/impromptu/caidai.png" class="img03" />
							<img src="/impromptu/drawstraws.png" class="img04" />
						</template>
						<template v-if="isStart || userList.length > 0">
							<div class="drawstraws">
								<div
									class="drawstraws-item"
									:class="{
										ani: isStart,
									}"
									v-for="(item, index) in userList"
									:key="index"
									@click="praiseStud(item)"
								>
									<div class="drawstraws-item-img"></div>
									<div class="drawstraws-item-text">{{ item.studName }}</div>
								</div>
							</div>
							<!-- <div v-if="!isStart && $_has('doExercise:praise')" class="flex flex-align-center praisebar">
								<span>点击学生姓名，给学生表扬评分。</span>
								<a @click="praise" href="javascript:;" class="praiselist">查看表扬列表</a>
							</div> -->
						</template>
					</div>
					<div class="conbox-ft flex  flex-align-center">
						<div class="setUserNums">
							<div class="flex flex-align-center">
								<a-checkbox :checked="isFilterOnline" @change="onCheckFilterOnline"
									><span style="font-size: 16px">过滤不在线学生</span>
								</a-checkbox>
								<a-checkbox :checked="isRepeat" @change="onCheckRepeat">
									<span style="font-size: 16px">可以重复抽答</span>
								</a-checkbox>
								<a-popover title="已抽答学生名单" trigger="click">
									<template slot="content">
										<div v-for="(item, index) in selectStuList" :key="index">
											{{ item.studName }}
										</div>
										<a-button
											style="margin-top: 10px"
											type="danger"
											size="small"
											v-if="selectStuList.length > 0"
											@click.stop="clearStuList"
										>
											清空已抽答学生名单
										</a-button>
										<a-empty v-else />
									</template>
									<a-button type="primary"> 已抽答学生名单 </a-button>
								</a-popover>
							</div>
							<div class="flex flex-align-center" style="margin-top: 10px">
								<span class="setUserNums-title">抽答人数</span>
								<div class="setUserNums-input">
									<a-input-number
										v-model="count"
										:min="1"
										:max="onlineStuList.length > 5 ? 5 : onlineStuList.length"
									/>
								</div>
								<span class="num"
									>最大可以选择{{ onlineStuList.length > 5 ? 5 : onlineStuList.length }}人</span
								>
							</div>
						</div>
						<div
							class="ft-btn save-btn"
							:class="{ red: isStart, disabeld: count <= 0 || onlineStuList.length <= 0 }"
							@click="startDrawstraws"
						>
							{{ isStart ? '停止抽答' : '开始抽答' }}
						</div>
					</div>
				</div>
				<a href="javascript:;" class="closeWin" @click="reback"><img src="closeWin.png" alt="" /></a>
			</div>
		</div>

		<praiseModal ref="praiseModal" @ok="playhhmusic"></praiseModal>
		<audio ref="hhmusic" src="/mp3/end.mp3" crossOrigin="anonymous" preload></audio>
	</div>
</template>

<script>
/* 数组切割 */
function splitArray(array, size) {
	var result = [];
	for (var i = 0; i < array.length; i += size) {
		result.push(array.slice(i, i + size));
	}
	return result;
}
function GetRandomNum(Min, Max) {
	var Range = Max - Min;
	var Rand = Math.random();
	return Min + Math.round(Rand * Range);
}
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
import bus from '@/utils/eventBus';
import { debounce } from '@/utils/base.js';
import praiseModal from '../module/praiseModal.vue';
let timer = null;
export default {
	name: 'drawstraws',
	components: { praiseModal },
	props: {
		//接收器信息
		machineData: {
			type: Object,
			default: () => {},
		},
		//表单数据
		formData: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			isStart: false,
			count: 1,
			userList: [],
			alluserList: [],
			isRepeat: true,
			selectIds: [],
			csId: '',
			isFilterOnline: false, //在全部学生中抽取
		};
	},
	created() {
		let beginClassData = this.$ls.get('beginClass'); //上课数据
		this.csId = beginClassData.csId;
	},
	computed: {
		...mapState({
			deviceType: (state) => state.websockStore.deviceType,
			studentList: (state) => state.websockStore.studentList,
			stopDeviceEventList: (state) => state.websockStore.stopDeviceEventList,
			isPro: (state) => state.isPro,
		}),
		onlineStuList() {
			return this.studentList && this.studentList.length > 0
				? this.studentList.filter((item) => {
						//不可重复，需要过滤掉已经选中过的同学
						if (
							((this.isFilterOnline && item.status == 1) || !this.isFilterOnline) &&
							(this.isRepeat || (!this.isRepeat && !this.selectIds.includes(item.studId)))
						) {
							return item;
						}
				  })
				: [];
		},
		selectStuList() {
			return this.studentList && this.studentList.length > 0
				? this.studentList.filter((item) => {
						//不可重复，需要过滤掉已经选中过的同学
						if (this.selectIds.includes(item.studId)) {
							return item;
						}
				  })
				: [];
		},
	},
	methods: {
		//开始随机抽答
		startDrawstraws() {
			if (this.count <= 0 || this.onlineStuList.length <= 0) {
				return;
			}
			if (this.isStart) {
				this.isStart = false;
				clearInterval(timer);
				let stuIds = this.userList.map((item) => item.studId);
				let selectIds = Array.from(new Set([...this.selectIds, ...stuIds]));
				this.selectIds = selectIds;
				this.addOpr();
				this.$refs.music.pause();
				this.$refs.bgmusic.pause();
				this.$refs.music.currentTime = 0;
				this.$refs.bgmusic.currentTime = 0;
			} else {
				this.isStart = true;
				this.userList = [];
				this.alluserList = splitArray(this.onlineStuList, Math.floor(this.onlineStuList.length / this.count));
				this.move();
				this.$refs.bgmusic.play();
			}
		},
		praise() {
			this.$emit('checkMenu', { type: 'praise' }, 'drawstraws');
		},
		//返回
		reback() {
			this.$emit('checkMenu', { type: 'drawstraws' });
		},
		move() {
			var interTime = 50; //设置间隔时间
			timer = setInterval(() => {
				let list = [];
				for (var i = 0; i < this.count; i++) {
					var num = GetRandomNum(0, this.alluserList[i].length - 1);
					list.push({
						...this.alluserList[i][num],
						status: 1,
						num,
					});
				}
				this.userList = list;
			}, interTime);
		},
		onCheckRepeat(e) {
			this.isRepeat = e.target.checked;
			this.count = 1;
		},
		onCheckFilterOnline(e) {
			this.isFilterOnline = e.target.checked;
			this.count = 1;
		},
		/* 清空已抽搭的学生名单 */
		clearStuList() {
			this.selectIds = [];
			this.count = 1;
		},
		praiseStud(stud) {
			if (this.isStart) {
				return;
			}
			this.$refs.praiseModal.show(stud, 3, this.csId, this.formData.classId);
		},
		addOpr() {
			this.$postAction(this.$sysManageapi.answerUrl.addOpr, {
				classId: this.formData.classId,
				subjectCode: this.formData.subjectCode,
				userId: this.userinfo.userId,
				opType: 'drawstraws',
			});
		},
		onTimeupdate(e) {
			let currentTime = e.target.currentTime;
			if (currentTime >= 6 && this.$refs.music.paused) {
				this.$refs.music.play();
			}
			console.log('currentTime', currentTime);
		},
		//倒计时结束3s后，调用停止
		ondjsTimeupdate(e) {
			let currentTime = e.target.currentTime;
			if (currentTime >= 3 && this.isStart) {
				this.startDrawstraws();
			}
		},
		playhhmusic() {
			this.$refs.hhmusic.play();
		},
	},
};
</script>

<style lang="less" scoped>
.pannel {
	position: relative;
	width: 1162px;
	margin: 0 auto;
	height: 100%;
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}
}
.cardbox {
	overflow: visible;
	/* height: 100%; */
	position: relative;
	margin-top: 0;
	padding-top: 0;
	height: calc(100vh - 185px);
}
.cardbox .closeWin {
	position: absolute;
	right: -20px;
	bottom: -16px;
	width: 46px;
	height: 46px;
	img {
		display: block;
		width: 100%;
		height: 100%;
	}
}
.bind-con {
	height: calc(100vh - 280px);
	background: #ffffff;
	border-radius: 8px;
	margin-top: 90px;
}

.bind-bd {
	width: 1162px;
	height: 100%;
	/* height: calc(100% - 30px);
	margin: 27px auto ; */
	background: rgb(243, 248, 255);
	border: 2px solid @primary-color;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}

	.list {
		margin: 20px;
		background: rgb(255, 255, 255);
		border: 2px dashed @primary-color;
		border-radius: 10px;
		height: calc(100% - 40px);
		font-size: 20px;
		color: #2e2424;
		padding: 20px 32px 40px;
		overflow: auto;
	}
}
.img01 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 300px;
	height: 290px;
}
.img02 {
	width: 200px;
	height: 200px;
	position: absolute;
	bottom: 30px;
	left: 80px;
}
.img03 {
	width: 468px;
	height: auto;
	position: absolute;
	top: 0;
	right: -80px;
}
.img04 {
	width: 500px;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%;-50%);
}

.conbox-ft {
	left: 40px;
	right: 40px;
	bottom: 30px;
	position: absolute;
	z-index: 999;
	z-index: 999;
	.save-btn {
		background: @primary-color;
		margin: 0 auto;
		width: 300px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		color: #fff;
		font-size: 30px;
		font-weight: bold;
		border-radius: 40px;
		cursor: pointer;
		&.red {
			background: #e64343 !important;
			border-color: rgba(230, 67, 67, 0.5) !important;;
		}
	}
	.save-btn.disabeld {
		background: #becad4;
	}
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}
}

/deep/.setUserNums {
	// position: absolute;
	// left: 15px;
	// top: 15px;
	.setUserNums-input {
		border: 1px solid @primary-color;
		border-radius: 23px;
		margin-left: 10px;
		input,
		.ant-input-number {
			border: none;
			height: 38px;
			border-radius: 23px;
			font-size: 15px;
			font-weight: bold;
			width: 140px;
		}
		.ant-input-number-handler-wrap {
			border-radius: 0 23px 23px 0 !important;
		}
		.ant-select-selection {
			border: none;
			height: 38px;
			border-radius: 23px;
			font-size: 15px;
		}

		.ant-select-selection__rendered {
			line-height: 38px;
		}
	}

	.num {
		color: #f00;
		font-size: 16px;
		margin-left: 10px;
	}
	.setUserNums-title {
		left: -5em;
		color: #000;
		font-size: 16px;
	}
}

.drawstraws {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	.drawstraws-item {
		width: calc(100% / 3); /* 每个元素宽度为100% / 3 */
		box-sizing: border-box;
		padding: 10px; /* 添加内边距 */
		text-align: center; /* 文字居中 */
		width: 230px;
		height: 230px;
		margin: 10px 20px;
		border-radius: 50%;
		cursor: pointer;
		font-size: 35px;
		font-weight: bold;
		color: @primary-color;
		position: relative;
		.drawstraws-item-img {
			width: 100%;
			height: 100%;
			display: block;
			background: url(/impromptu/circle.png);
			background-size: 100% 100%;
		}
		.drawstraws-item-text {
			width: 230px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			margin: 0;
		}
		&.ani {
			.drawstraws-item-img {
				animation: skill infinite 4s cubic-bezier(0.54, -0.65, 0.52, 1.68);
			}
			.drawstraws-item-text {
				animation: skill_text infinite 4s cubic-bezier(0.54, -0.65, 0.52, 1.68);
			}
		}
	}

	@keyframes skill {
		0% {
			transform: rotate(0deg);
			box-shadow: none;
		}
		50% {
			box-shadow: 0 0 10px var(--primary), inset 0 0 20px var(--primary);
		}
		100% {
			transform: rotate(720deg);
			box-shadow: none;
		}
	}

	@keyframes skill_text {
		0%,
		100% {
			color: var(--bright);
			text-shadow: none;
		}
		50% {
			color: var(--primary);
			text-shadow: 0 0 6px var(--primary);
		}
	}
}
.praisebar {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 18px;
	.praiselist {
		text-decoration: underline;
		color: @primary-color;
		margin-left: 20px;
	}
}
</style>
